import React, {useState} from "react";
import Image from "next/image";
function ProtectecImage(){
//用'useState'hook來管理密碼'password'和是否顯示完整圖片'shoeFullImage'的狀態
const [password, setPassword]=useState('');
const [showFullImage, setShowFullImage]=useState(false);
const correctPassword='自定義密碼';
//用來存正確的密碼,可自定義
const handlePasswordChange=(e)=>{
setPassword(e.target.value);
}; //用於處理密碼輸入的變化
//用於檢查輸入的密碼是否正確。如果正確將'showFullImage'設為'true'並顯示完整圖片;否則顯示警告消息
const handleShowImage=()=>{
if(password===correctPassword){
setShowFullImage(true);
}else{
alert('Please tyr again.');
}
};
return(
<div>
<h1>Image</h1>
<input type="password"
placeholder="Enter password"
value={password}
onChange={handlePasswordChange}
/>
<button onClick={handleShowImage}>Show Image</button>
{!showFullImage&&(
<Image src="自定義預覽圖"
alt="Preview"
width={300}
height={200}
/>
)}
{showFullImage&&(
<Image src="自定義完整圖"
alt="Full Image"
width={250}
height={250}
/>
)}
</div>
);
}
export default ProtectecImage;
2.實作ps是12345
密碼輸入錯誤:
密碼輸入正確: